workflow.js ➔ create_dialog - Code Metrics - Inspection of "Add workaround for jquery height bug with flexbox..." - flack/openpsa - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( 402192...fc4c1b )

by Andreas

created 2019-06-05 15:39 UTC

workflow.js ➔ create_dialog C

↳ Parent: static/midcom.workflow/workflow.js

Complexity

Conditions	9
Paths	48

Size

Total Lines	98
Code Lines	73

Duplication

Lines	0
Ratio	0 %

Importance

Changes	3
Bugs	1	Features	0

Metric	Value
cc	9
eloc	73
nc	48
nop	3
dl	0
loc	98
rs	5.5503
c	3
b	1
f	0

4 Functions

Rating	Name	Size	Complexity
A	workflow.js ➔ ... ➔ config.close	7	2
A	workflow.js ➔ ... ➔ config.buttons.push.click	3	1
A	workflow.js ➔ ... ➔ config.open	3	1
A	workflow.js ➔ ... ➔ $(ꞌ<div id="midcom-dialog"></div>ꞌ).dialogcreate	24	1

How to fix Long Method

$(document).ready(function() {
    $('body').on('click', '[data-dialog="delete"]', function(event) {
        event.preventDefault();
        var button = $(this),
            dialog = $('<div class="midcom-delete-dialog">'),
            spinner = $('<div class="spinner"><i class="fa fa-pulse fa-spinner"></i></div>'),
            text = button.data('dialog-text'),
            relocate = button.data('relocate'),
            action = button.attr('href') || button.data('action'),
            options = {
                title:  button.data('dialog-heading'),
                modal: true,
                width: 'auto',
                maxHeight: $(window).height(),
                buttons: [{
                    text: button.text().trim() || button.data('dialog-heading'),
                    click: function() {
                        if (relocate) {
                            $('<form action="' + action + '" method="post" class="midcom-dialog-delete-form">')
                                .append($('<input type="submit" name="' + button.data('form-id') + '">'))
                                .append($('<input type="hidden" name="referrer" value="' + location.pathname + '">'))
                                .hide()
                                .prependTo('body');
                            $('input[name="' + button.data('form-id') + '"]').click();
                        } else {
                            var params = {
                                referrer: location.pathname
                            };
                            params[button.data('form-id')] = 1;

                            $.post(action, params).done(function(message) {
                                button.trigger('dialogdeleted', [message]);
                                dialog.dialog("close");
                                if (   typeof window.parent.$ !== "undefined"
                                    && window.parent.$('#midcom-dialog').length > 0 ) {
                                    window.parent.$('#midcom-dialog').dialog('close');
                                }
                            });
                        }
                    }
                }, {
                    text: button.data('dialog-cancel-label'),
                    click: function() {
                        if (   typeof window.parent.$ !== "undefined"
                            && window.parent.$('#midcom-dialog').length > 0 ) {
                            window.parent.$('#midcom-dialog')
                                .nextAll('.ui-dialog-buttonpane')
                                .find('.ui-state-disabled')
                                .removeClass('ui-state-disabled');
                        }
                        $(this).dialog("close");
                    }
                }]
            };

        if ($('.midcom-delete-dialog').length > 0) {
            $('.midcom-delete-dialog').remove();
        }

        if (button.data('recursive')) {
            dialog.addClass('loading');
            options.buttons[0].disabled = true;
            $.getJSON(MIDCOM_PAGE_PREFIX + 'midcom-exec-midcom.helper.reflector/list-children.php',
                {guid: button.data('guid')},
                function (data) {
                    function render(items) {
                        var output = '';
                        $.each(items, function(i, item) {
                            output += '<li class="leaf ' + item['class'] + '">' + item.icon + ' ' + item.title;
                            if (item.children) {
                                output += '<ul class="folder_list">';
                                output += render(item.children);
                                output += '</ul>';
                            }
                            output += '</li>';
                        });
                        return output;
                    }

                    if (data.length > 0) {
                        $('<ul class="folder_list">')
                            .append($(render(data)))
                            .appendTo($('#delete-child-list'));
                    } else {
                        dialog.find('p.warning').hide();
                    }
                    options.buttons[0].disabled = false;

                    dialog
                        .removeClass('loading')
                        .dialog('option', 'position', dialog.dialog('option', 'position'))
                        .dialog('option', 'buttons', options.buttons)
                        .focus();
                });
        } else {
            text = '<p>' + text + '</p>';
        }

        dialog
            .css('min-width', '300px') // This should be handled by dialog's minWidth option, but that doesn't work with width: "auto"
                                       // Should be fixed in https://github.com/jquery/jquery-ui/commit/643b80c6070e2eba700a09a5b7b9717ea7551005
            .append($(text))
            .append(spinner)
            .appendTo($('body'));

        make_dialog(dialog, options);
    });

    $('body').on('click', '[data-dialog="dialog"]', function(event) {
        event.preventDefault();
        if (!$(this).hasClass('active')) {
            create_dialog($(this), $(this).find('.toolbar_label').text() || $(this).attr('title') || '', $(this).attr('href'));
        }
    });

    $('body').on('click', '[data-dialog="confirm"]', function(event) {
        event.preventDefault();
        var button = $(this),
            dialog = $('<div class="midcom-confirm-dialog">'),
            options = {
                title:  button.data('dialog-heading'),
                modal: true,
                width: 'auto',
                maxHeight: $(window).height(),
                buttons: [{
                    text: button.data('dialog-confirm-label'),
                    click: function() {
                        button.closest('form').submit();
                    }
                }, {
                    text: button.data('dialog-cancel-label'),
                    click: function() {
                        $(this).dialog("close");
                    }
                }]
            };

        if ($('.midcom-confirm-dialog').length > 0) {
            $('.midcom-confirm-dialog').remove();
        }

        dialog
            .css('min-width', '300px') // This should be handled by dialog's minWidth option, but that doesn't work with width: "auto"
                                       // Should be fixed in https://github.com/jquery/jquery-ui/commit/643b80c6070e2eba700a09a5b7b9717ea7551005
            .append($('<p>' + button.data('dialog-text') + '</p>'))
            .appendTo($('body'));
        make_dialog(dialog, options);
    });
    $('body').on('click', '.midcom-workflow-dialog .ui-dialog-buttonpane .ui-button', function() {
        var pane = $(this).closest('.ui-dialog-buttonpane'),
            iframe = pane.prevAll('#midcom-dialog').find('iframe'),
            disabler = function() {
                pane.find('.ui-button')
                    .addClass('ui-state-disabled');
            };

        if (!$(this).hasClass('dialog-extra-button') && $('form.datamanager2', iframe.contents()).length > 0) {
            $('form.datamanager2', iframe.contents()).on('submit', disabler);
        } else {
            disabler();
        }
    });
});

function create_dialog(control, title, url) {
    if ($('.midcom-workflow-dialog').length > 0) {
        $('.midcom-workflow-dialog .ui-dialog-content').dialog('close');
    }

    var dialog, iframe, spinner,
        config = {
            dialogClass: 'midcom-workflow-dialog',
            buttons: [],
            title: title,
            height:  590,
            width: 800,
            close: function() {
                control.removeClass('active');
                iframe.css('visibility', 'hidden');
                if (iframe[0].contentWindow) {
                    iframe[0].contentWindow.stop();
                }
            },
            open: function() {
                dialog.closest('.ui-dialog').focus();
            }};

    if (control.data('dialog-cancel-label')) {
        config.buttons.push({
            text: control.data('dialog-cancel-label'),
            click: function() {
                $(this).dialog( "close" );
            }
        });
    }

    if ($('#midcom-dialog').length > 0) {
        dialog = $('#midcom-dialog');
        iframe = dialog.find('> iframe');
        spinner = dialog.find('> i').show();

        config.height = dialog.dialog('option', 'height');
        config.width = dialog.dialog('option', 'width');
        if (   config.width > window.innerWidth
            || config.height > window.innerHeight) {
            config.position = { my: "center", at: "center", of: window, collision: 'flipfit' };
        }
    } else {
        spinner = $('<i class="fa fa-pulse fa-spinner"></i>');
        iframe = $('<iframe name="datamanager-dialog"'
                   + ' frameborder="0"'
                   + ' marginwidth="0"'
                   + ' marginheight="0"'
                   + ' width="100%"'
                   + ' height="100%"'
                   + ' scrolling="auto" />');

        dialog = $('<div id="midcom-dialog"></div>')
            .append(spinner)
            .append(iframe)
            .on('dialogcreate', function() {
                var maximized = false,
                    saved_options = {};
                $(this).prevAll('.ui-dialog-titlebar').on('dblclick', function() {
                    if (!maximized) {
                        saved_options.position = dialog.dialog('option', 'position');
                        saved_options.width = dialog.dialog('option', 'width');
                        saved_options.height = dialog.dialog('option', 'height');
                        dialog.dialog('option', {
                            width: '99%',
                            height: $(window).height(),
                            position: {my: 'center top', at: 'center top', of: window}
                        });
                        maximized = true;
                    } else {
                        dialog.dialog('option', {
                            height: saved_options.height,
                            width: saved_options.width,
                            position: saved_options.position
                        });
                        maximized = false;
                    }
                });
            })
            .appendTo($('body'));
    }

    config.height = Math.min(config.height, window.innerHeight);
    config.width = Math.min(config.width, window.innerHeight);

    if (url) {
        iframe.attr('src', url);
    }

    control.addClass('active');
    if (   control.parent().attr('role') === 'gridcell'
        && control.closest('.jqgrow').hasClass('ui-state-highlight') === false) {
        //todo: find out why the click doesn't bubble automatically
        control.parent().trigger('click');
    }
    make_dialog(dialog, config);
    dialog.dialog("instance").uiDialog.draggable("option", "containment", false);
}

function make_dialog(node, config) {
    var backup = false;

    if (typeof($.fn.popover) != 'undefined') {
        backup = $.button;
        $.widget.bridge("button", $.ui.button);
    }

    node.dialog(config);

    if (backup) {
        $.button = backup;
    }
}


1			$(document).ready(function() {
2			$('body').on('click', '[data-dialog="delete"]', function(event) {
3			event.preventDefault();
4			var button = $(this),
5			dialog = $('<div class="midcom-delete-dialog">'),
6			spinner = $('<div class="spinner"><i class="fa fa-pulse fa-spinner"></i></div>'),
7			text = button.data('dialog-text'),
8			relocate = button.data('relocate'),
9			action = button.attr('href') \|\| button.data('action'),
10			options = {
11			title: button.data('dialog-heading'),
12			modal: true,
13			width: 'auto',
14			maxHeight: $(window).height(),
15			buttons: [{
16			text: button.text().trim() \|\| button.data('dialog-heading'),
17			click: function() {
18			if (relocate) {
19			$('<form action="' + action + '" method="post" class="midcom-dialog-delete-form">')
20			.append($('<input type="submit" name="' + button.data('form-id') + '">'))
21			.append($('<input type="hidden" name="referrer" value="' + location.pathname + '">'))
22			.hide()
23			.prependTo('body');
24			$('input[name="' + button.data('form-id') + '"]').click();
25			} else {
26			var params = {
27			referrer: location.pathname
28			};
29			params[button.data('form-id')] = 1;
30
31			$.post(action, params).done(function(message) {
32			button.trigger('dialogdeleted', [message]);
33			dialog.dialog("close");
34			if ( typeof window.parent.$ !== "undefined"
35			&& window.parent.$('#midcom-dialog').length > 0 ) {
36			window.parent.$('#midcom-dialog').dialog('close');
37			}
38			});
39			}
40			}
41			}, {
42			text: button.data('dialog-cancel-label'),
43			click: function() {
44			if ( typeof window.parent.$ !== "undefined"
45			&& window.parent.$('#midcom-dialog').length > 0 ) {
46			window.parent.$('#midcom-dialog')
47			.nextAll('.ui-dialog-buttonpane')
48			.find('.ui-state-disabled')
49			.removeClass('ui-state-disabled');
50			}
51			$(this).dialog("close");
52			}
53			}]
54			};
55
56			if ($('.midcom-delete-dialog').length > 0) {
57			$('.midcom-delete-dialog').remove();
58			}
59
60			if (button.data('recursive')) {
61			dialog.addClass('loading');
62			options.buttons[0].disabled = true;
63			$.getJSON(MIDCOM_PAGE_PREFIX + 'midcom-exec-midcom.helper.reflector/list-children.php',
64			{guid: button.data('guid')},
65			function (data) {
66			function render(items) {
67			var output = '';
68			$.each(items, function(i, item) {
69			output += '<li class="leaf ' + item['class'] + '">' + item.icon + ' ' + item.title;
70			if (item.children) {
71			output += '<ul class="folder_list">';
72			output += render(item.children);
73			output += '</ul>';
74			}
75			output += '</li>';
76			});
77			return output;
78			}
79
80			if (data.length > 0) {
81			$('<ul class="folder_list">')
82			.append($(render(data)))
83			.appendTo($('#delete-child-list'));
84			} else {
85			dialog.find('p.warning').hide();
86			}
87			options.buttons[0].disabled = false;
88
89			dialog
90			.removeClass('loading')
91			.dialog('option', 'position', dialog.dialog('option', 'position'))
92			.dialog('option', 'buttons', options.buttons)
93			.focus();
94			});
95			} else {
96			text = '<p>' + text + '</p>';
97			}
98
99			dialog
100			.css('min-width', '300px') // This should be handled by dialog's minWidth option, but that doesn't work with width: "auto"
101			// Should be fixed in https://github.com/jquery/jquery-ui/commit/643b80c6070e2eba700a09a5b7b9717ea7551005
102			.append($(text))
103			.append(spinner)
104			.appendTo($('body'));
105
106			make_dialog(dialog, options);
107			});
108
109			$('body').on('click', '[data-dialog="dialog"]', function(event) {
110			event.preventDefault();
111			if (!$(this).hasClass('active')) {
112			create_dialog($(this), $(this).find('.toolbar_label').text() \|\| $(this).attr('title') \|\| '', $(this).attr('href'));
113			}
114			});
115
116			$('body').on('click', '[data-dialog="confirm"]', function(event) {
117			event.preventDefault();
118			var button = $(this),
119			dialog = $('<div class="midcom-confirm-dialog">'),
120			options = {
121			title: button.data('dialog-heading'),
122			modal: true,
123			width: 'auto',
124			maxHeight: $(window).height(),
125			buttons: [{
126			text: button.data('dialog-confirm-label'),
127			click: function() {
128			button.closest('form').submit();
129			}
130			}, {
131			text: button.data('dialog-cancel-label'),
132			click: function() {
133			$(this).dialog("close");
134			}
135			}]
136			};
137
138			if ($('.midcom-confirm-dialog').length > 0) {
139			$('.midcom-confirm-dialog').remove();
140			}
141
142			dialog
143			.css('min-width', '300px') // This should be handled by dialog's minWidth option, but that doesn't work with width: "auto"
144			// Should be fixed in https://github.com/jquery/jquery-ui/commit/643b80c6070e2eba700a09a5b7b9717ea7551005
145			.append($('<p>' + button.data('dialog-text') + '</p>'))
146			.appendTo($('body'));
147			make_dialog(dialog, options);
148			});
149			$('body').on('click', '.midcom-workflow-dialog .ui-dialog-buttonpane .ui-button', function() {
150			var pane = $(this).closest('.ui-dialog-buttonpane'),
151			iframe = pane.prevAll('#midcom-dialog').find('iframe'),
152			disabler = function() {
153			pane.find('.ui-button')
154			.addClass('ui-state-disabled');
155			};
156
157			if (!$(this).hasClass('dialog-extra-button') && $('form.datamanager2', iframe.contents()).length > 0) {
158			$('form.datamanager2', iframe.contents()).on('submit', disabler);
159			} else {
160			disabler();
161			}
162			});
163			});
164
165			function create_dialog(control, title, url) {
166			if ($('.midcom-workflow-dialog').length > 0) {
167			$('.midcom-workflow-dialog .ui-dialog-content').dialog('close');
168			}
169
170			var dialog, iframe, spinner,
171			config = {
172			dialogClass: 'midcom-workflow-dialog',
173			buttons: [],
174			title: title,
175			height: 590,
176			width: 800,
177			close: function() {
178			control.removeClass('active');
179			iframe.css('visibility', 'hidden');
180			if (iframe[0].contentWindow) {
181			iframe[0].contentWindow.stop();
182			}
183			},
184			open: function() {
185			dialog.closest('.ui-dialog').focus();
186			}};
187
188			if (control.data('dialog-cancel-label')) {
189			config.buttons.push({
190			text: control.data('dialog-cancel-label'),
191			click: function() {
192			$(this).dialog( "close" );
193			}
194			});
195			}
196
197			if ($('#midcom-dialog').length > 0) {
198			dialog = $('#midcom-dialog');
199			iframe = dialog.find('> iframe');
200			spinner = dialog.find('> i').show();
			0 ignored issues – show Unused Code introduced 2019-06-05 15:54 UTC by Report Bug Copy Issue Report The assignment to variable `spinner` seems to be never used. Consider removing it. Loading history...
201			config.height = dialog.dialog('option', 'height');
202			config.width = dialog.dialog('option', 'width');
203			if ( config.width > window.innerWidth
204			\|\| config.height > window.innerHeight) {
205			config.position = { my: "center", at: "center", of: window, collision: 'flipfit' };
206			}
207			} else {
208			spinner = $('<i class="fa fa-pulse fa-spinner"></i>');
209			iframe = $('<iframe name="datamanager-dialog"'
210			+ ' frameborder="0"'
211			+ ' marginwidth="0"'
212			+ ' marginheight="0"'
213			+ ' width="100%"'
214			+ ' height="100%"'
215			+ ' scrolling="auto" />');
216
217			dialog = $('<div id="midcom-dialog"></div>')
218			.append(spinner)
219			.append(iframe)
220			.on('dialogcreate', function() {
221			var maximized = false,
222			saved_options = {};
223			$(this).prevAll('.ui-dialog-titlebar').on('dblclick', function() {
224			if (!maximized) {
225			saved_options.position = dialog.dialog('option', 'position');
226			saved_options.width = dialog.dialog('option', 'width');
227			saved_options.height = dialog.dialog('option', 'height');
228			dialog.dialog('option', {
229			width: '99%',
230			height: $(window).height(),
231			position: {my: 'center top', at: 'center top', of: window}
232			});
233			maximized = true;
234			} else {
235			dialog.dialog('option', {
236			height: saved_options.height,
237			width: saved_options.width,
238			position: saved_options.position
239			});
240			maximized = false;
241			}
242			});
243			})
244			.appendTo($('body'));
245			}
246
247			config.height = Math.min(config.height, window.innerHeight);
248			config.width = Math.min(config.width, window.innerHeight);
249
250			if (url) {
251			iframe.attr('src', url);
252			}
253
254			control.addClass('active');
255			if ( control.parent().attr('role') === 'gridcell'
256			&& control.closest('.jqgrow').hasClass('ui-state-highlight') === false) {
257			//todo: find out why the click doesn't bubble automatically
258			control.parent().trigger('click');
259			}
260			make_dialog(dialog, config);
261			dialog.dialog("instance").uiDialog.draggable("option", "containment", false);
262			}
263
264			function make_dialog(node, config) {
265			var backup = false;
266
267			if (typeof($.fn.popover) != 'undefined') {
268			backup = $.button;
269			$.widget.bridge("button", $.ui.button);
270			}
271
272			node.dialog(config);
273
274			if (backup) {
275			$.button = backup;
276			}
277			}
278

flack / openpsa

Push — master ( 402192...fc4c1b )

workflow.js ➔ create_dialog C

Complexity

Size

Duplication

Importance

4 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like